<template>
	<view class="container">
		<view v-for="(item, index) in list" :key="index" class="item" @click="itemClick(item)">
			<u-image width="100%" height="300" :src="item.cover" border-radius="20"></u-image>
			<view class="title">{{item.title}}</view>
			<view class="info">
				<view class="lecturer">{{item.lecturer}}</view>
				<view class="start-time">{{$u.timeFormat(item.liveStartAt, 'yyyy年mm月dd日 hh:MM')}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getLiveList, getLivePlayUrl } from '@/api/study.js'
	export default {
		data() {
			return {
				list: [],
			}
		},
		onLoad() {
			this.getList();
		},
		methods: {
			getList() {
				getLiveList().then(res => {
					console.log(res);
					this.list = res.data.content;
				})
			},
			
			itemClick(item) {
				getLivePlayUrl(item.alias).then(res => {
					console.log(res);
					this.$u.route({
						url: 'pages_base/common/webview',
						params: {
							url: encodeURIComponent(res.data),
							title: item.title
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: $app-page-bg-color;
	}
	
	.container{
		padding-left: $app-page-padding;
		padding-right: $app-page-padding;
	}
	
	.item{
		display: flex;
		flex-direction: column;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		padding: 30rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		
		.title{
			margin-top: 20rpx;
			color: $app-font-color;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
		}
		
		.info{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin-top: 5rpx;
			font-size: 26rpx;
			color: $app-font-color;
			font-family: PingFang SC;
			
			.lecturer{
				
			}
			
			.start-time{
				
			}
		}
	}
</style>
